<template>
  <view class="music-healing">
    <view class="content"
      >{{musicPlan.summary}}</view
    >
    <view class="music-healing-list">
      <view
        class="music-healing-list-item"
        v-for="(music, index) in musicList"
        :key="index"
        @tap="playThis(music, (index + 1))"
      >
        <view
          v-if="!playId || playId !== (index + 1)"
          class="icon-play-button icon-music-start"
        />
        <view v-else class="icon-play-button icon-music-pause" />
        <text>{{ music.musicName }}</text>
      </view>
    </view>
    <button open-type="contact" class="button-plain-purple">联系健管科学疗愈</button>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
export default {
  props: {
    musicPlan: {
      type: Object,
      default: () => null
    }
  },
  computed: {
    musicList() {
      return this.musicPlan.musicList
    }
  },
  data() {
    return {
      audioCtx: null, //音乐播放的对象
      playId: null,
    };
  },
  methods: {
    playThis(data,index) {
      if (this.playId == index) {
        /**暂停 */
        this.audioCtx.pause();
        this.playId = null;
        return;
      }
      this.playId = index;
      this.audioCtx.src = data.musicUrl;
      /**播放 */
      this.audioCtx.play();
    }
  },
  mounted() {
    /**初始化音乐播放对象，不需要添加audio的标签，只需要把src给它调用play方法就ok */
    this.audioCtx = Taro.createInnerAudioContext();
  },
  destroyed() {
    this.audioCtx.pause();
    this.playId = null;
    this.audioCtx = null;
  }
};
</script>

<style lang="less">
@import "./index.less";
</style>
